<template>
  <div>
    <el-container>
      <el-header style="height: 89vh; padding: 0">
        <person-carousel />
      </el-header>
      <el-container>
        <el-aside width="16vw">
          <person-aside />
        </el-aside>
        <el-main>
          <div class="tabContain">
            <div class="tabs">
              <person-dna-taps :isShow="isShow" />
            </div>
            <div class="personSerach">
              <person-dna-search />
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 引入轮播图组件
import PersonCarousel from "./child/personDonation/PersonCarousel.vue";
// 引入aside组件
import PersonAside from "./child/personDonation/PersonAside.vue";
// 引入taps组件
import PersonDnaTaps from "./child/personDonation/PersonDnaTaps.vue";
// 引入serach组件
import PersonDnaSearch from "./child/personDonation/PersonDnaSearch.vue";
export default {
  name: "PersonDonation",
  props: {},
  data() {
    return {
      isShow: false, //是否开放修改信息权限
    };
  },

  components: {
    PersonCarousel,
    PersonAside,
    PersonDnaTaps,
    PersonDnaSearch,
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {},
  beforeRouteEnter(to, from, next) {
    // 如果是从个人信息页面跳转过来则修改信息按钮可用，否则不可用
    next((vm) => {
      if (from.name === "public") {
        vm.isShow = false;
      } else {
        vm.isShow = true;
      }
      //因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      //当前组件的实例
    });
  },
  watch: {},
};
</script>
<style scoped lang="scss">
.el-aside {
  color: #333;
  text-align: center;
  // height: 100vh;
  // line-height:100vh;
  margin-left: 1vw;
}

.el-main {
  // background-color: #e9eef3;
  color: #333;
  text-align: center;
  // height: 100vh;
  // line-height: 160px;
  .tabContain {
    margin-left: 1vw;
    display: flex;
    margin: 0 2vw 0 0;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
  }
}
.tabs {
  margin-left: 1vw;
  background-color: rgb(244, 250, 244) !important;
  width: 60vw;
  height: 100%;
}
.personSerach {
  margin-left: 3vw;
  background-color: white !important;
  width: 15vw;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.04);
  height: 153vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
